<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>知否知否，应是等你好久11</li>
    <li>知否知否，应是等你好久22</li>
    <li>知否知否，应是等你好久33</li>
    <li>知否知否，应是等你好久44</li>
    <li>知否知否，应是等你好久55</li>
</ul>
<ol id="nav">
    <li>生僻字</li>
    <li>生僻字</li>
    <li>生僻字</li>
    <li>生僻字</li>
    <li>生僻字</li>
</ol>

<script>
    // getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
    // 1.返回的是 获取获取元素对象的集合, 以伪数组的形式存储的
    var lis = document.getElementsByTagName('li');
    console.log(lis);     // HTMLCollection(5) [li, li, li, li, li]
    console.log(lis[0]);

    // 2.遍历
    // 伪数组 没有 foreach吗 ?
    for (let li of lis) {
        console.log(li);
    }

    // 3.如果页面中只有一个li, 返回的还是伪数组的形式

    // 4.如果页面没有这个元素, 发那会是的一个空的伪数组的形式

    console.log(typeof lis);
    console.dir(lis);

    // 5.获取某个元素(父元素)内部所有指定标签名的子元素
    //  element.getElementsByTagName('标签名');    父元素必须是指定的单个元素
    var ol = document.getElementsByTagName('ol');       // [ol]
    // Uncaught TypeError: ol.getElementsByTagName is not a function
    // 这种情况不能直接调用 ol.getXX
    // console.log(ol.getElementsByTagName('li'));
    console.log(ol[0].getElementsByTagName('li'));

    var olById = document.getElementById('nav');
    console.log(olById.getElementsByTagName('li'))
</script>
</body>
</html>
